<template>
	<el-container class="sign-main">
		<el-header class="header">
			<div class="title">在线签章</div>
			<div class="file">
				<el-button
					type="danger"
					size="small"
					plain
					@click="prevDom"
					:disabled="currentDom == 1"
					>返回上一份</el-button
				>
				<span class="filename">当前文件：{{ docInfo.documentName }}</span>
				<el-button
					type="danger"
					size="small"
					plain
					@click="nextDom"
					:disabled="currentDom == signInfo.docList.length"
					>签署下一份</el-button
				>
			</div>
			<div class="btns">
				<el-button
					type="danger"
					size="small"
					:disabled="showPDF"
					@click="finish"
					v-if="type !== 'ukey'"
					>完成签署(后台)</el-button
				>
			</div>
		</el-header>
		<el-container>
			<el-aside width="250px" class="aside">
				<div class="title">文件签署</div>
				<span>拖动 印章至想要加盖的位置</span>
				<div class="seal-img">
					<div class="seal-img-move">
						<img
							class="s-icon"
							draggable="true"
							@dragstart="move"
							:src="signInfo.signature"
						/>
						<!-- <div v-else>{{ type === 'ukey' ? '请插入ukey' : '上传签章' }}</div> -->
					</div>
				</div>
				<el-button
					type="danger"
					size="medium"
					:disabled="showPDF"
					plain
					@click="pagingSeal.show = true"
					>点击加盖骑缝章</el-button
				>
			</el-aside>
			<el-main
				v-if="showPDF"
				class="main"
				v-loading="loading"
				:element-loading-text="loadingMsg"
			>
				<embed class="lookpdf" :src="`${baseurl}/pdf/pdf/${docInfo.domID}`" />
			</el-main>
			<el-main
				v-else
				class="main"
				v-loading="loading"
				:element-loading-text="loadingMsg"
			>
				<div class="pdfs">
					<el-scrollbar style="height: 100%" id="pdfsbody">
						<div
							class="pdf"
							:id="`pdf-${i}`"
							v-for="i in docInfo.pages"
							:key="i"
						>
							{{ i }}
							<img
								class="pdf-img"
								:src="`${baseurl}/pdf/img/${docInfo.domID}/${i}`"
							/>
							<div class="seals" @drop="drop($event, i)" @dragover="allowDrop">
								<nja-seal
									v-for="seal in seals.filter((d) => d.page === i)"
									:x.sync="seal.x"
									:y.sync="seal.y"
									@del="del(seal)"
									:src="signInfo.signature"
									:key="seal.id"
								></nja-seal>
								<nja-seal
									v-if="pagingSeal.show"
									:isPaging="true"
									:x.sync="pagingSeal.x"
									:y.sync="pagingSeal.y"
									:src="signInfo.signature"
									@del="pagingSeal.show = false"
								></nja-seal>
							</div>
						</div>
					</el-scrollbar>
				</div>

				<div class="pre-pdfs">
					<el-scrollbar style="height: 100%">
						<div
							class="pre-pdf"
							v-for="i in docInfo.pages"
							:key="i"
							:class="{ iscurrentPage: currentPage === i }"
							@click="move2page(i)"
						>
							<div class="pdf-num">{{ i }}</div>
							<img
								class="pdf-img"
								:src="`${baseurl}/pdf/img/${docInfo.domID}/${i}`"
							/>
						</div>
					</el-scrollbar>
				</div>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import NjaSeal from './Seal'
import axios from 'axios'
import { mapGetters } from 'vuex'
import { readUkey, decodeCert, signData } from './common/ukey.js'
export default {
	props: ['id', 'type'],
	components: {
		NjaSeal
	},
	data() {
		return {
			showPDF: false,
			// hasPdf: false,
			loading: false,
			loadingMsg: 'PDF处理中',
			currentPage: 1,
			currentDom: 1,
			baseurl: process.env.VUE_APP_SEAL_BASE_PATH,
			scrollState: true,
			pagingSeal: {
				show: false,
				x: 794 - 80,
				y: 1124 / 2 - 80
			},
			seals: []
		}
	},
	computed: {
		...mapGetters(['signInfo']),
		docInfo() {
			return this.signInfo.docList[0]
		}
	},
	methods: {
		convert(x, y) {
			return {
				x: parseInt((x / 794) * 595),
				y: 842 - parseInt(((y + 165) / 1124) * 842)
			}
		},
		convertPage(x, y) {
			return {
				x: parseInt((x / 595) * 794) - 80,
				y: parseInt(((842 - y) / 842) * 1124 - 80)
			}
		},
		finish() {
			this.loadingMsg = '正在签章...'
			this.loading = true
			// 完成签章
			this.$http
				.postJson(`${this.baseurl}/pdf/finish`, {
					id: this.docInfo.domID,
					sealStr: this.signInfo.signature.split(';base64,')[1],
					seals: this.seals.map((d) => {
						let { x, y } = this.convert(d.x, d.y)
						return {
							page: d.page,
							x,
							y
						}
					}),
					paging: this.pagingSeal.show
						? { y: this.convert(this.pagingSeal.x, this.pagingSeal.y).y }
						: null
				})
				.then((res) => {
					console.log('nja==> ', res)
					this.showPDF = true
					this.loading = false
					this.$message({
						message: '签署成功',
						type: 'success'
					})
				})
				.catch((err) => {
					console.log(err)
					this.loading = false
					this.$message({
						message: `pdf签署失败`,
						type: 'error'
					})
				})
		},
		move2page(page) {
			this.currentPage = page
			this.scrollState = false
			document.getElementById(`pdf-${page}`).scrollIntoView({
				behavior: 'smooth',
				// block: 'nearest',
				block: 'start',
				inline: 'start'
			})

			this.$nextTick(() => {
				setTimeout(() => {
					this.scrollState = true
				}, 1000)
			})
		},
		del(item) {
			this.seals.splice(
				this.seals.findIndex((d) => d.id === item.id),
				1
			)
		},
		drop(ev, i) {
			// debugger
			let xy = JSON.parse(ev.dataTransfer.getData('Text'))
			this.seals.push({
				id: new Date().getTime(),
				page: i,
				x: ev.offsetX - xy.x,
				y: ev.offsetY - xy.y
			})
		},
		allowDrop(ev) {
			ev.preventDefault()
		},
		move(ev) {
			let x = ev.offsetX
			let y = ev.offsetY
			ev.dataTransfer.setData('Text', JSON.stringify({ x, y }))
		},
		// 签上一份
		prevDom() {
			this.currentDom--
			this.seals = []
			this.showPDF = false
			this.loading = false
		},
		// 签下一份
		nextDom() {
			this.currentDom++
			this.seals = []
			this.showPDF = false
			this.loading = false
		}
	},
	mounted() {
		document.querySelectorAll('.el-scrollbar__view').forEach((d) => {
			if (d.parentNode.parentNode.id === 'pdfsbody') {
				d.parentNode.addEventListener('scroll', () => {
					if (this.scrollState) {
						this.currentPage = parseInt(d.parentNode.scrollTop / 1153) + 1
					}
				})
			}
		})
	}
}
</script>

<style lang="scss" scoped>
.sign-main {
	background: #f2f2f2;
	height: 100vh;
	.header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		box-shadow: 0 5px 5px 2px rgba(0, 0, 0, 0.1);
		border-top: 1px solid #e5e5e5;
		margin-bottom: 30px;

		.file {
			display: flex;
			align-items: center;
			gap: 12px;
			.filename {
				color: #000;
			}
		}
	}
	.aside {
		padding: 0 20px;
		text-align: center;
		border-right: 1px solid rgba(250, 250, 250, 0.5);
		font-size: 14px;
		color: #999;
		.title {
			height: 40px;
			font-size: 24px;
			color: #333;
			border-bottom: 1px solid #ccc;
		}
		.seal-img {
			padding: 10px;
			background-color: #fff;
			text-align: center;
			border-radius: 6px;
			margin-top: 20px;
			margin-bottom: 20px;
		}
	}
	.s-icon {
		width: 80%;
		max-width: 200px;
		cursor: move;
	}
	.seal-img-move {
		height: 160px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: transparent;
		position: relative;
		cursor: pointer;
	}
	.main {
		background-color: #323740;
		position: relative;
		text-align: center;
		overflow: hidden;
		padding: 0px;
		.lookpdf {
			width: 100%;
			height: calc(100vh - 90px);
		}
		::v-deep .el-scrollbar__wrap {
			// 隐藏框架布局layout.vue中el-aside和el-main下面的横向滚动条
			overflow-x: hidden;
		}
		.pdfs {
			margin: 20px auto 24px;
			margin-bottom: 0px;
			overflow: auto;
			width: 794px;
			height: calc(100vh - 120px);
			.pdf {
				position: relative;
				width: 794px;
				height: 1124px;
				// height: 100%;
				// width:595.0====;height:842.0
				background-color: rgba(100, 100, 100, 0.5);
				margin-bottom: 30px;
				.seals {
					top: 0px;
					left: 0px;
					position: absolute;
					width: 100%;
					height: 100%;
				}
			}
		}
		.pre-pdfs {
			position: absolute;
			right: 8px;
			top: 20px;
			overflow: auto;
			width: 115px;
			border-left: 10px solid #323740;
			background-color: #323740;
			height: calc(100vh - 120px);
			.pre-pdf {
				position: relative;
				width: 101px;
				height: 141px;
				margin-left: 5px;
				margin-top: 5px;
				background-color: rgba(100, 100, 100, 0.5);
				margin-bottom: 25px;
				cursor: pointer;
			}
		}
		.pdf-img {
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
		.pdf-num {
			position: absolute;
			font-size: 30px;
			font-weight: 700;
			color: rgba(0, 0, 0, 0.7);
			width: 100%;
			text-align: center;
			bottom: 10px;
			z-index: 99;
		}
	}
	.iscurrentPage {
		box-shadow: 0px 0px 5px 3px rgba($color: #f56c6c, $alpha: 0.8);
		.pdf-num {
			color: #f56c6c;
		}
	}
}
</style>
